import React from 'react';
import { connect } from 'react-redux';
import { Modal } from 'antd-mobile';
import config from '../../../assets/js/conf/config';
import action from '../../../store/actions/index';
import SubHeaderComponent from '../../../components/subHeader';
import * as utils from '../../../assets/js/utils/index';
import * as Request from '../../../services/user/index';
import Css from '../../../assets/css/user/index.css';

class Index extends React.Component {
    constructor(props){
        super(props);
        this.state = {  
            userInfo: {}
        }
    }

    componentDidMount(){
        this.getUserInfo();
    }

    //安全退出
    outLogin(){
        const { uid, isLogin } = this.props.user;
        if(isLogin){ //安全退出
            Modal.alert('', '确认要退出吗？', [
                { text: '取消', onPress: () => {}, style: 'default' },
                { text: '确定', onPress: () => {
                    Request.outLogin({ uid }).then(res => {
                        if(res.code === 200){
                            this.props.dispatch(action.user.outLogin());
                            this.goPage('login/index');
                        }
                    });
                }, style: 'default' },
            ]);
        }else{ //跳转登录
            this.goPage('login/index');
        }
    }

    //获取用户信息
    getUserInfo(){
        const { uid, isLogin } = this.props.user;
        if(isLogin){
            Request.getUserInfo({ uid }).then(res => {
                if(res.code === 200){
                    this.setState({ userInfo: res.data });
                }
            });
        }
    }

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    componentWillUnmount(){
        this.setState = (state, callback) => {
            return ;
        }
    }

    render() {
        const { isLogin } = this.props.user;
        const { userInfo } = this.state;
        return (
            <div className={Css['page']}>
                <SubHeaderComponent title="会员中心"></SubHeaderComponent>
                <div className={Css['user-info-wrap']}>
                    <div className={Css['head']}>
                        <img src={isLogin && !!userInfo.head ? userInfo.head : require('../../../assets/images/user/my/default-head.png')} alt="loading" />
                    </div>
                    <div className={Css['nickname']}>{isLogin ? userInfo.nickname : '昵称'}</div>
                    <div className={Css['points']}>我的积分：{isLogin ? userInfo.points : '0'}</div>
                </div>
                <div className={Css['order-name-wrap']}>
                    <div className={Css['order-name']}>全部订单</div>
                    <div className={Css['show-order']} onClick={() => this.goPage('myorder/order?status=all')}>查看全部订单 &gt;</div>
                </div>
                <div className={Css['order-status-wrap']}>
                    <div className={Css['item']} onClick={() => this.goPage('myorder/order?status=0')}>
                        <div className={Css['icon']+' '+Css['wait']}></div>
                        <div className={Css['text']}>待支付</div>
                    </div>
                    <div className={Css['item']} onClick={() => this.goPage('myorder/order?status=1')}>
                        <div className={Css['icon']+' '+Css['take']}></div>
                        <div className={Css['text']}>待收货</div>
                    </div>
                    <div className={Css['item']} onClick={() => this.goPage('myorder/review')}>
                        <div className={Css['icon']+' '+Css['comment']}></div>
                        <div className={Css['text']}>待评价</div>
                    </div>
                </div>
                <div className={Css['menu-list-wrap']}>
                    <ul onClick={() => this.goPage('profile/index')}>
                        <li>个人资料</li>
                        <li></li>
                    </ul>
                    <ul>
                        <li>收货地址</li>
                        <li></li>
                    </ul>
                    <ul>
                        <li>绑定手机</li>
                        <li></li>
                    </ul>
                    <ul>
                        <li>修改密码</li>
                        <li></li>
                    </ul>
                    <ul>
                        <li>我的收藏</li>
                        <li></li>
                    </ul>
                    <div className={Css['login-btn']} onClick={() => this.outLogin()}>{isLogin ? '安全退出' : '登录/注册'}</div>
                </div>
            </div>  
        )
    }
}

export default connect((store) => {
    return store;
})(Index);